<template>
	<view class="container">
	
		<view class="c-info">
			<u--form
			  ref="formRef"
			  label-width="90px"
				:rules="rules"
			  :model="formData"
			  :label-style="{ fontSize: '28rpx', color: '#646464' }"
			>
			<u-form-item label="学生姓名" prop="stuName" :required="true">
			  <u--input
			    v-model="formData.stuName"
			    border="bottom"
			    placeholder="请输入学生姓名"
					clearable
			  ></u--input>
			</u-form-item>
			
			<u-form-item label="学生性别" prop="stuGender" :required="true">
				<view class="area-input" @click.stop="genderPickerShow = true">
					<u--input v-model="formData.stuGender" placeholder="请选择学生性别" border="bottom" readonly></u--input>
					<view class="icon-arrow">
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				
				<u-picker
					:show="genderPickerShow"
					confirmColor="#CF1A1B"
					:columns="genderColumns"
					@confirm="genderConfirm"
					@cancel="genderPickerShow = false"
				></u-picker>
			</u-form-item>
			
			<u-form-item label="学生年龄" prop="stuAge" :required="true">
			  <u--input
			    v-model="formData.stuAge"
			    border="bottom"
			    placeholder="请输入学生年龄"
					clearable
					type="number"
			  ></u--input>
			</u-form-item>
			
				<u-form-item label="籍贯所在地" prop="place" :required="true">
					<view class="area-input" @click.stop="pickerShow = true">
						<u--input v-model="formData.place" placeholder="请选择籍贯所在地" border="bottom" readonly></u--input>
						<view class="icon-arrow">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<u-picker
						:show="pickerShow"
						ref="uPicker"
						confirmColor="#CF1A1B"
						:columns="columns"
						@confirm="confirm"
						@cancel="pickerShow = false"
						@change="changeHandler"
					></u-picker>
				</u-form-item>
				
				<u-form-item label="家长姓名" prop="parentName" :required="true">
				  <u--input
				    v-model="formData.parentName"
				    border="bottom"
				    placeholder="请输入家长姓名"
						clearable
				  ></u--input>
				</u-form-item>
				
				<u-form-item label="家长联系方式" prop="parentContact" :required="true">
				  <u--input
				    v-model="formData.parentContact"
				    border="bottom"
				    placeholder="请输入家长联系方式"
						clearable
						type="number"
				  ></u--input>
				</u-form-item>
			
			</u--form>
			
		</view>
		
		<!-- 提交 -->
		<view class="c-action">
			<u-button type="primary" text="提交报名" @click.stop="handleSubmit" :loading="btnLoading" ></u-button>
		</view>
		
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	
	export default {
		data() {
			return {
				title: '',
				btnLoading: false,
				formData: {
					stuName: '',
					stuGender: '',
					stuAge: null,
					place: '',
					parentName: '',
					parentContact: ''
				},
				rules: {
					stuName: [
						{
							required: true,
							message: '请输入学生姓名',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if(/[^\u4E00-\u9FA5]/.test(value)){
									callback(new Error('姓名只能输入中文'))
								}
								callback();
							},
						}
					],
					stuGender: [
						{
							required: true,
							message: '请选择学生性别',
							trigger: ['blur', 'change']
						}
					],
					stuAge: [
						{
							required: true,
							message: '请输入学生年龄',
							trigger: ['blur', 'change']
						}
					],
					place: [
						{
							required: true,
							message: '请选择籍贯所在地',
							trigger: ['blur', 'change']
						}
					],
					parentName: [
						{
							required: true,
							message: '请输入家长姓名',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if(/[^\u4E00-\u9FA5]/.test(value)){
									callback(new Error('姓名只能输入中文'))
								}
								callback();
							},
						}
					],
					parentContact: [
						{
							required: true,
							message: '请输入家长联系方式',
							trigger: ['blur', 'change']
						},
						{
						  validator: (rule, value, callback) => {
						    return uni.$u.test.mobile(value);
						  },
						  message: '手机号码不正确',
						  trigger: ['change','blur'],
						}
					]
				},
				pickerShow: false,
				columns: [],	// 第一列数据
				columnData: [],	// 第二列
				genderPickerShow: false,	// 选择性别弹窗
				genderColumns: [
					['男', '女']
				]
			};
		},
		onReady() {
		  this.$refs.formRef.setRules(this.rules)
		},
		onLoad(query){
			const { itemId } = query
			this.formData.itemId = itemId
			this.initUserInfo()
			// this.getNowAddress()
			this.handleGetCascade()
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			genderConfirm(e){
				const { value } = e
				this.formData.stuGender = value[0]
				this.genderPickerShow = false
			},
			changeHandler(e) {
				const {
						columnIndex,
						value,
						values, // values为当前变化列的数组内容
						index,
						// 微信小程序无法将picker实例传出来，只能通过ref操作
						picker = this.$refs.uPicker
				} = e
					// 当第一列值发生变化时，变化第二列(后一列)对应的选项
					if (columnIndex === 0) {
						picker.setColumnValues(1, this.columnData[index])
					}
				},
				// 回调参数为包含columnIndex、value、values
			confirm(e) {
				const { value } = e
				const place = value[0][0] + value[1]
				this.formData.place = place
				this.pickerShow = false
			},
			// 获取当前位置
			getNowAddress(){
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})
				
				qqmapsdk.reverseGeocoder({
					success: async (res) => {
						const { province, city } = res.result.address_component
						this.formData.place = province + city
					},
					fail: (error) => {
						console.error('error', error);
					},
				})
			},
			initUserInfo(){
				const { name, mobile } = this.getUserInfo
				this.formData.parentName = name
				this.formData.parentContact = mobile
			},
			async handleSubmit(){
				if(this.btnLoading === true){
					return false
				}

				try {
					await this.$refs.formRef.validate()
					
					this.btnLoading = true
					
					const res = await this.$request({
						method: 'POST',
						url: '/ltb-center/carFriendQuestion/eduEnroll',
						data: {
							...this.formData,
							stuGender: this.formData.stuGender === '男' ? 1 : 2
						}
					})
					
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						// uni.redirectTo({
						//   url: `/carePack/leaveMessage/index`,
						// })
						uni.navigateBack()
					}, 1500)
					
					this.btnLoading = false
					
				} catch (res) {
					uni.showToast({
						title: res.respMsg,
						icon: 'none'
					})
					this.btnLoading = false
				}
			},
			// 获取省市区数据
			async handleGetCascade(){
				const res = await this.$request({
					method: 'GET',
				  url: '/user-center/region/get-cascade-region',
				})
				const one = []
				const two = []
				res.datas && res.datas.length && res.datas.forEach(i => {
					one.push([i.name])
					const tempArr = []
					if(i.children && i.children.length){
						i.children.forEach(o => {
							tempArr.push(o.name)
						})
					}else {
						tempArr.push(i.name)
					}
					two.push(tempArr)
				})
				this.columns.push(one)
				this.columns.push(two[0])	// 初始化第二列
				this.columnData = two
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	
	.c-info {
		margin-top: 20rpx;
		padding: 0 32rpx;
		background-color: #ffffff;
		/deep/ .u-form {
			.u-form-item {
				padding: 0 20rpx;
			}
		}
		.area-input {
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  .icon-arrow {
		    border-bottom: 0.5px solid #dadbde;
		    display: flex;
		    align-items: center;
		  }
		}
	}
	
	.c-action {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 178rpx;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx 32rpx 68rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -10rpx 20rpx 1rpx rgba(0,0,0,0.1);
	}
	
}
</style>
